<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>综合服务系统</title>
    <!--公用样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css"/>
    <!--页面样式-->
    <link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/it/common/css/style.css"/>
    <!--Layui-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css" media="all"/>
    <!--扩展样式-->
    <link rel="stylesheet" href="${re.contextPath}/plugin/common/css/extended.css"/>

    <script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>
    <script type="text/javascript" src="${re.contextPath}/plugin/jquery/jquery-3.2.1.min.js"></script>
    <style>
        body {
            position: relative;
        }

        .option div {
            font-size: 14px;
            line-height: 16px;
            padding-top: 4px;
            box-sizing: border-box;
            margin-top: 10px;
        }

        .option div input {
            height: 16px;
            /*margin-top: 4px;*/
        }

        .tipsWord p {
            line-height: 16px;
            margin-top: 15px;
        }

        .back_btn {
            width: 100%;
            height: 35px;
            position: absolute;
            bottom: 30px;
            font-size: 13px
        }

        .back_btn .clickbtn {
            width: 60px;
            line-height: 30px;
            border: 1px solid #3e7ce7;
            border-radius: 4px;
            color: #ffffff;
            margin: 0 auto;
            background: #3e7ce7;
            position: absolute;
            left: 0;
            right: 0;
        }

        .question_numbers_list {
            width: 15px;
            height: 15px;
            font-size: 12px;
            line-height: 15px;
            text-align: center;
            border: 1px solid #e0e0e0;
            margin-left: 5px;
            margin-top: 5px;
        }
    </style>
</head>

<body>

<#--内容-->
<div class="container">
    <form id="form" action="" enctype="multipart/form-data" method="get">
        <div class="textInfo" style="display: flex;width: 90vw;margin-left: 5vw;height: 90vh;margin-top: 5vh">
            <input style="display: none;" name="startTime" value="${startTime}"/>
            <input id="${ks.examId}" name="examId" value="${ks.examId}" style="display: none;"/>
            <div class="textLeft" style="width: 80%;height: 100%">
                <div style="width: 100%;height: 40px;border-radius: 4px 4px 0 0;background-color: #3e7ce7;text-align: center;color: #FFF;font-weight: bold;">${ks.examName}</div>
                <input name="paperId" value="${paperId}" style="display: none;"/>
                <div class="textContre"
                     style="width: 100%;height: calc(90vh - 40px);overflow-y: auto;border: 1px solid #828282;border-top: 0;border-radius: 4px;box-sizing: border-box;padding: 0 20px 20px">
                    <#list st as item>
                        <div>
                            <input id="${item.quId}" name="exQuList[${item.orderNo}].quId" value="${item.quId}"
                                   style="display: none;"/>
                            <div style="font-size: 14px;margin-top: 20px;overflow: hidden" id="${item.orderNo}">
                                <input class="is_answer" value="false" style="display: none;"/>
                                <input id="qu${item.orderNo}" name="exQuList[${item.orderNo}].answerContent"
                                       value=""
                                       style="display: none;"/>
                                <#if "${item.quType}" == "001">
                                <#--单选-->
                                    <p style="width: 100%;float: left;line-height: 16px;font-weight: bold;">${item.orderNo}
                                        .（选择题）${item.content}</p>
                                    <div class="option" style="width: 85%;float: left">
                                        <#list item.exDxList as dxanswer>
                                            <div>
                                                <input id="${dxanswer.quAnswerId}"
                                                       style="display: none;"/>
                                                <input disabled="disabled" type="radio" name="${item.orderNo}"
                                                       value="${dxanswer.answerContent}"/> ${dxanswer.answerContent}
                                                、${dxanswer.answerAnalysis?replace("<[^>]*>","","ri")}
                                            </div>
                                        </#list>
                                    </div>

                                <#elseif "${item.quType}" == "002">
                                <#--多选-->
                                    <p style="width: 100%;float: left;line-height: 16px;font-weight: bold;">${item.orderNo}
                                        .（选择题）${item.content}</p>
                                    <div class="option" style="width: 85%;float: left">
                                        <#list item.exDuoxList as multchoice>
                                            <div>
                                                <input id="${multchoice.quAnswerId}" style="display: none;"/>
                                                <input disabled="disabled" type="checkbox" name="${item.orderNo}"
                                                       value="${multchoice.answerContent}"> ${multchoice.answerContent}
                                                、${multchoice.answerAnalysis?replace("<[^>]*>","","ri")}</div>
                                        </#list>
                                    </div>
                                <#elseif "${item.quType}" == "003">
                                <#--判断-->
                                    <p style="width: 100%;float: left;line-height: 16px;font-weight: bold;">${item.orderNo}
                                        .（判断题）${item.content}</p>
                                    <div class="option" style="width: 85%;float: left">
                                        <#list item.exPdList as judge>
                                            <div>
                                                <input id="${judge.quAnswerId}"
                                                       style="display: none;"/>
                                                <input disabled="disabled" type="radio" name="${item.orderNo}"
                                                       value="${judge.answerContent}"> ${judge.answerContent?replace("<[^>]*>","","ri")}
                                            </div>
                                        </#list>
                                    </div>
                                <#elseif "${item.quType}" == "004">
                                <#--填空-->
                                    <p style="width: 100%;float: left;line-height: 16px;font-weight: bold;">${item.orderNo}
                                        .（填空题）${item.content}</p>
                                    <div class="option" style="width: 85%;float: left">
                                        <#list item.exTkList as fill>
                                            <div>
                                                <input id="${fill.quAnswerId}"
                                                       style="display: none;"/>${fill.answerAnalysis}
                                                <input disabled="disabled" type="text"
                                                       name="${item.orderNo}">
                                            </div>
                                        </#list>
                                    </div>
                                <#elseif "${item.quType}" == "005">
                                <#--问答-->
                                    <p style="width: 100%;float: left;line-height: 16px;font-weight: bold;">${item.orderNo}
                                        .（问答题）${item.content}</p>
                                    <div class="option" style="width: 85%;float: left">
                                        <#--	<#list item.exWdList as text>-->
                                        <div style="width: 100%">
                                            <input id="${item.exWdList[0].quAnswerId}"
                                                   style="display: none;"/>
                                            <textarea disabled="disabled" name="${item.orderNo}"
                                                      style="width: 600px;background-color: #f2f2f2;height: 200px;resize: none;"></textarea>
                                        </div>
                                        <#--	</#list>-->
                                    </div>
                                </#if>
                            </div>
                        </div>
                        <div>
                            <div>
                                正确答案：${item.answer}
                            </div>
                            <div>
                                答案解析：${item.analysis}
                            </div>
                        </div>
                    </#list>
                </div>
            </div>
            <div class="textLeft"
                 style="width: 20%;border: 1px solid #828282;margin-left: 10px;border-radius: 4px;position: relative">
                <#--	用户名-->
                <div class="uesrName" style="width: 100%;height: 10vh;display: flex;padding: 10px 5px;">
                    <div style="flex: 0.6;text-align: right;height: 20px;line-height: 20px">
                        <img src="${re.contextPath}/plugin/common/images/username.png" style="width: 20px;height: 20px">
                    </div>
                    <div style="flex: 5;font-size: 14px;padding-left: 5px;height: 20px;line-height: 20px">
                        用户名：${userName}</div>
                </div>
                <#--	考试时间-->
                <#if '${ks.type}' != "${null}">
                    <div class="userTime" style="width: 100%;height: 10vh;display: flex;padding: 10px 5px;">
                        <div style="flex: 0.6;text-align: right;height: 20px;line-height: 20px">
                            <img src="${re.contextPath}/plugin/common/images/js.png" style="width: 20px;height: 20px">
                        </div>
                        <input id="countdown_input" name="answerTime" style="display: none"/>
                        <div id="countdown"
                             style="flex: 5;font-size: 14px;padding-left: 5px;height: 20px;line-height: 20px">
                            得分：${score}分
                        </div>
                    </div>
                </#if>
                <#--	试题部分-->
                <div class="userText" style="width: 100%;height: 10vh;padding: 10px 5px;">
                    <div style="height: 20px;line-height: 20px;width: 100%;display: flex">
                        <div style="flex: 0.6;text-align: right;">
                            <img src="${re.contextPath}/plugin/common/images/yztm.png" style="width: 20px;height: 20px"
                                 alt="">
                        </div>
                        <div id="number_questions"
                             style="flex: 5;font-size: 14px;padding-left: 5px;height: 20px;line-height: 20px">
                           <span>已做题目：</span><span id="complete">0</span><span>/${(st?size)!}</span>
                        </div>
                    </div>

                    <div style="width: 100%;display: flex;flex-wrap: wrap;margin-top: 5px">
                        <#list st as item>
                        <a href="##{item.orderNo}" ondragstart="return false">
                            <div class="question_numbers_list"
                                 style="">${item.orderNo}</div>
                        </a>
                        </#list>
                    </div>
                </div>
                <#--	保存  提交按钮-->
                <div class="back_btn" style="">
                    <div>
                        <button class="clickbtn" onclick="returnpage()">
                            返回
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
    var form;
    var layer;
    var numlist = document.getElementsByClassName('question_numbers_list');
    var isreply = document.getElementsByClassName('is_answer');
    var completenum = document.getElementById('complete');
    layui.use(['layer', 'form'], function () {
        layer = layui.layer;
        form = layui.form;
    });

    $(function () {
        var a = [];
        var b = [];

        <#list exstuList as item>
        a.push({
            quId: '${item.quId}',
            serial: '${item.serial}',
            answer: '${item.answer}',
            type: '${item.quType}',
            score: '${item.score}'
        })
        </#list>
        <#list st as item>
        b.push({
            serial: '${item.orderNo}',
            answer: '${item.answer}',
            score: '${item.score}'
        })
        </#list>
        a.forEach(item => {
            console.log(item.score);
            console.log(b[item.serial - 1].score)
            isreply[item.serial - 1].setAttribute('value', 'true');
            if (item.score === b[item.serial - 1].score) {
                numlist[item.serial - 1].style.color = '#3e7ce7';
                numlist[item.serial - 1].style.border = '1px solid #3e7ce7';
            } else {
                numlist[item.serial - 1].style.color = 'red';
                numlist[item.serial - 1].style.border = '1px solid red';

            }
            let elem = document.getElementById('qu' + item.serial);
            // let brother = elem.parentNode.children[3].children;
            let brother =  $(elem).parent().find(".option").children();
            elem.setAttribute('value', item.answer);
            let answer = item.answer.split(',');
            switch (item.type) {
                case '001':
                    for (let i = 0; i < brother.length; i++) {
                        if (contains(answer, brother[i].children[1].value)) {
                            brother[i].children[1].checked = true;
                        } else {
                            brother[i].children[1].checked = false;
                        }
                    }
                    break;
                case '002':
                    for (let i = 0; i < brother.length; i++) {
                        if (contains(answer, brother[i].children[1].value)) {
                            brother[i].children[1].checked = true;
                        } else {
                            brother[i].children[1].checked = false;
                        }
                    }
                    break;
                case '003':
                    for (let i = 0; i < brother.length; i++) {
                        if (contains(answer, brother[i].children[1].value)) {
                            brother[i].children[1].checked = true;
                        } else {
                            brother[i].children[1].checked = false;
                        }
                    }
                    break;
                case '004':
                    for (let i = 0; i < brother.length; i++) {
                        brother[i].children[1].setAttribute('value', answer[i])
                    }
                    break;
                case '005':
                    for (let i = 0; i < brother.length; i++) {
                        brother[i].children[1].value = answer[i];
                    }
                    break;
            }
        })
        numberOfQuestions();
    })

    function numberOfQuestions() {
        var m = 0;
        for (let i = 0; i < isreply.length; i++) {
            if (isreply[i].value == 'true') {
                m += 1;
            }
            completenum.innerHTML = m.toString();
        }
    }

    function contains(arr, val) {
        let i = arr.length;
        while (i--) {
            if (arr[i] == val) {
                return true;
            }
        }
        return false;
    }

    function returnpage() {
        window.close();
    }

</script>
</body>

</html>
